<!--
 * @Description: eslint-plugin-vue-demo测试
 * @Author: laoyuan
 * @Date: 2023-05-25 10:44:25
-->
<template>
  <div class="todo-box">
    <input class="todo-input" v-model="inputValue" />
    <van-button type="primary" @click="handleClick" class="add-button">测试按钮</van-button>
    <ul class="todo-list">
      <li
        v-for="(todo, index) in todoItems"
        :key="todo.id"
        class="todo-item"
        :class="{ 'todo-item--done': todo.done }"
        @click="todo.done = !todo.done"
      >
        <span v-if="todo.done">✓</span> {{ todo.text }} {{ index }}
      </li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
  defineOptions({
    name: 'NewTodo',
  });
  interface TodoItem {
    id: string;
    done: boolean;
    text: string;
  }

  const inputValue = ref('');
  const todoItems = ref<TodoItem[]>([]);

  function handleClick() {
    todoItems.value.push({
      id: Math.random().toString(36).slice(-8),
      done: false,
      text: inputValue.value,
    });
    inputValue.value = '';
  }

  const buttonColor = computed(() => (inputValue.value ? 'black' : 'white'));
</script>
<style lang="scss" scoped>
  .todo-box {
    margin-top: 20px;
  }
  .todo-input {
    width: 200px;
    height: 40px;
    margin: 0 10px;
    color: #3fb983;
    border: 1px solid #ddd;
    border-radius: 6px;
  }
  .add-button {
    display: inline-block;
    width: 100px;
    height: 40px;
    color: v-bind(buttonColor);
    pointer-events: v-bind("inputValue ? 'initial' : 'none'");
  }
  .todo-list {
    list-style: none;
  }
  .todo-item {
    background-color: #eef;
  }
  .todo-item-done {
    color: #fff;
    background-color: #3fb983;
  }
  .todo-item-name {
    position: absolute;
    top: 5px;
    left: 0;
    display: flex;
    font-size: 12px;
    background: #3fb983;
  }
</style>
